<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function doAdd(){
            //1.创建新元素(创建DOM对象)
            var li=document.createElement("li");
            // // 2.创建文本内容
            // var txt=document.createTextNode("li04");
            // // 3.将文本内容添加到li中去
            // li.appendChild(txt);

            li.innerHTML="哈哈，我是文本内容";

            li.setAttribute("hello","world");//设置属性名和值

            // 4.找到li的父元素
            var ul=document.querySelector("ul");
            // 5.将li添加到父元素中去
            ul.appendChild(li);
        }

        function doAddTr(){
           

            var tr=document.createElement("tr");//创建tr元素
            for(var i=1;i<=5;i++){//循环创建5个td
                var td=document.createElement("td");
                td.innerHTML="td"+i;
                tr.appendChild(td);//向tr中添加td元素，添加了5次
            }
            // tr.style.textAlign="center";//样式的方式
            // tr.align="center";//设置属性的方式
            tr.setAttribute("align","center");//设置属性的方式
            var tb=document.querySelector("tbody");//获取tr的父元素
            tb.appendChild(tr);

        }

        

    </script>
</head>
<body>
    <input type="button" value="添加一行" onclick="doAdd()">
    <input type="button" value="为表格添加一行" onclick="doAddTr()">
    <ul>
        <li>li01</li>
        <li>li02</li>
        <li>li03</li>
    </ul>
    <table border="1" width="500">
        <thead>
            <tr>
                <th>th01</th>
                <th>th02</th>
                <th>th03</th>
                <th>th04</th>
                <th>th05</th>
            </tr>
            <tbody></tbody>
        </thead>
    </table>
</body>
</html>